<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <link rel = "Shortcut Icon" href="http://www.kaishengit.com/favicon.ico" />
	<script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
        .input-xlarge{
            width:460px;
        }
    </style>
</head>
<body>
	<div class="container">
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container">
					<a href="main" class="brand">凯盛项目管理系统</a>
					<ul class="nav pull-right">
						<li class="active">
							<a>${sessionScope.user.name }</a>
						</li>
						<li>
							<a href="user">个人资料</a>
						</li>
						<li class="divider-vertical"></li>
						<li>
							<a href="loginout">安全退出</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="span3">
				<div class="wall">
					<ul class="nav nav-list">
						<li class="nav-header">${project.name }</li>
						<li class="divider"></li>
						<li>
							<a href="project?id=${project.id }">
								<i class="icon-home"></i>最新动态
							</a>
						</li>
						<li class="active">
							<a href="goal">
								<i class="icon-white icon-flag"></i>目标
							</a>
						</li>
						<li>
							<a href="document">
								<i class="icon-folder-open"></i>资料库
							</a>
						</li>
						<li>
							<a href="folder">
								<i class="icon-file"></i>文件共享
							</a>
						</li>
						<li>
							<a href="contact">
								<i class="icon-user"></i>联系人
							</a>
						</li>
						<li>
							<a href="idea">
								<i class="icon-fire"></i>想法
							</a>
						</li>
						<li>
							<a href="project?m=edit">
								<i class="icon-cog"></i>项目设置
							</a>
						</li>
					</ul>
				</div>
			</div>
            <div class="span9">
                <form class="form-horizontal" id = "myform" action="goal?m=edit&id=${goal.id }" method="post">
                    <fieldset>
                        <legend>编辑目标</legend>
                        <div class="control-group" id ="namediv">
                            <label class="control-label" for="goal_name">目标名称</label>
                            <div class="controls">
                                <input type="text" class="input-xlarge" id="goal_name" name="goal_name" value="${goal.name }" />
                                <p class="help-block">请输入目标名称</p>
                            </div>
                        </div>
                        <div class="control-group" id ="detail">
                            <label class="control-label" for="goal_details">目标描述</label>
                            <div class="controls">
                                <textarea name="goal_details" id="goal_details" rows="8" class="input-xlarge">${goal.detail }</textarea>
                                <p class="help-block">请输入目标的详细描述</p>
                            </div>
                        </div>
                        <div class="control-group" id ="progress">
							<label class="control-label" for="goal_progress">任务进度</label>
							<div class="controls">
								<div class="input-append">
									<input id="goal_progress" name="goal_progress" class="span1" type="text" value="${goal.progress }" style="text-align:right" /><span class="add-on">%</span>
								</div>
								<span class="help-inline">请输入任务进度，1-100之间的整数</span>
							</div>
						</div>
                        <div class="form-actions">
                            <button class="btn btn-primary" id ="btn" type="button">编辑</button>
                            <a href="goal" class="btn">返回</a>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
	<script type="text/javascript">
    	  $(document).ready(function() {
    	  
    	  	var reg = /^(\d{1,2}|100)$/;
    	  
            $("#goal_name").focus(function() {            
                $("#namediv").removeClass("error");
            });
            $("#goal_name").blur(function() {
                var nameStr = $(this).val();
                if (nameStr.trim() == "") {
                    $("#namediv").addClass("error");
                }
            });
            $("#goal_details").focus(function() {            
                $("#detail").removeClass("error");
            });
            $("#goal_details").blur(function() {
                var pwd = $(this).val();
                if (pwd == "") {                
                    $("#detail").addClass("error");
                }
            });
            $("#goal_progress").blur(function() {
                var p = $(this).val();
                if (!reg.test(p)) {
                    $("#progress").addClass("error");
                };
            });
            $("#goal_progress").focus(function() {            
                $("#progress").removeClass("error");
            });
            $("#btn").click(function() {
                var name = $("#goal_name").val();
                var detail = $("#goal_details").val();
                var progress = $("#goal_progress").val();
                if (name.trim() == "") {          
                    $("#name").addClass("error");
                }
                if (detail == "") {
                    $("#detail").addClass("error");
                }
                if (!reg.test(progress)) {
                    $("#progress").addClass("error");
                };
                if (name.trim() != "" && detail != "" && reg.test(progress)) {
                    $("#myform").submit();
                }
            });
        });
    </script>
</body>
</html>